<template>
	<view id="in-wh-container">
		<u-form labelPosition="left" :model="form" :rules="rules" ref="whFormRef">
			<u-form-item labelWidth="180" label-align="right" label="服务项目:" prop="project" right-icon="arrow-right">
				<u-input v-model="form.project" @click="show = true" disabled placeholder="请选择服务项目" />

			</u-form-item>
			<u-form-item labelWidth="180" label-align="right" label="服务价格:" prop="price" borderBottom>
				<u-input v-model.number="form.price" 
					placeholder="请输入服务价格(包含交通费)" @confirm="inputTray"></u-input>
			</u-form-item>
		</u-form>
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		<view class="footer">
			<u-button type='warning' @click="save">添加</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					price: '',
					project: ''
				},
				list: [{
						value: 'D01002',
						label: 'D01002(接驳台2)'
					},
					{
						value: 'D01003',
						label: 'D01003(接驳台3)'
					},
				],
				rules: {
					price: [{
						required: true,
						message: '请输入服务价格',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					project: [{
						required: true,
						message: '请选择服务项目',
						trigger: ['change'],
					}]

				}

			}
		},
		methods: {
			inputTray() {},

			saveCheckParam() {
				if (!this.form.price) {
					uni.showToast({
						icon: 'none',
						title: '服务价格为空',
						duration: 3000
					});
					return true;
				}
				if (!this.form.project) {
					uni.showToast({
						icon: 'none',
						title: '服务项目为空',
						duration: 3000
					});
					return true;
				}
				return false;
			},

			confirm(e) {
				this.form.project = e[0].value
			},

			save() {
				if (this.saveCheckParam()) {
					return;

				}
				uni.navigateTo({
					url:'/pages/project/index'
				})

			}

		}, 
	}
</script>

<style lang="scss">
	#in-wh-container {
		padding: 0 30rpx;
		padding-bottom: 55px;

		.u-form-item {
			font-size: 15px;
			font-weight: bold;
			border-bottom: 1px solid #eee;
		}
		::v-deep .u-form-item--left__content__label{
			flex:none
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;

			& button {
				width: 100%;
			}
		}
	}
</style>